<template>
	<view class="main">
		<view class="score-info">
			<view class="score-user-name"><p>{{user.name}}</p></view>
			<view class="score-user-num"><p>学号：{{user.userAccount}}</p></view>
			<view class="term-opt"><button class="select-term-btn" size="mini">全部</button></view>
		</view>
		<view class="score-main">
			<view class="score-title"><p>成绩单</p></view>
			<view>
				<table class="course-score-table">
					<tr>
						<th><p>课程<image class="sort-img" @click="reverseCourse" src="https://ming-edu.oss-cn-beijing.aliyuncs.com/sort.png"></image></p></th>
						<th><p>学分</p></th>
						<th><p>成绩</p></th>
					</tr>
					<tr class="class-item" v-for="score in courseScoreList">
						<td><p>{{score.courseName}}</p></td>
						<td><p>{{score.credit}}</p></td>
						<td><p>{{score.score}}</p></td>
					</tr>
				</table>
			</view>
		</view>
	</view>
</template>

<script>
	import {ScoreService, UserService} from "../../services/api.service"
	import {needLogin} from "../../common/utils/utils";
export default {
	data() {
		return {
			courseScoreList:  [],
			courseScoreAllData: {},
			user: {}
		}
	},
	onLoad() {
		const _this = this
		uni.startPullDownRefresh({
			success() {
				_this.getUserInfo()
				_this.getCourseScore()
			},
			complete() {
				uni.stopPullDownRefresh();
			}
		})
	},
	onShow() {
		needLogin(this)
	},
	methods: {
		// 获取用户信息
		getUserInfo() {
			UserService.get()
					.then(res => {
						if (res.code === 0) {
							this.user = res.data.user
						}
					}).catch(err => {
				console.log(err)
			})
		},
		// 获取成绩
		getCourseScore() {
			ScoreService.get()
				.then(res => {
					if (res.code ===0 ) {
						this.courseScoreList = res.data.courseScores.courseScoreVoList
						this.courseScoreAllData = res.data.courseScores
						this.courseScoreList.reverse()
					}
				}).catch(err => {
					console.log('err')
					console.log(err)
				})
		},
		reverseCourse() {
			this.courseScoreList.reverse()
		}
	},
	onPullDownRefresh() {
		this.getUserInfo()
		this.getCourseScore()
		uni.stopPullDownRefresh();
	},
}
</script>

<style>
.main {
	width: 100%;
}
.score-info {
	margin: 20rpx;
	color: white;
	background-color: #7569f9;
	padding: 50rpx 30rpx 20rpx 30rpx;
	border-radius: 15px;
}
.score-info .score-user-name {
	font-size: 20px;
	line-height: 30px;
}
.term-opt {
	text-align: right;
}
.term-opt .select-term-btn {
	background-color: rgba(137, 129, 250, 0.9);
	color: white;
	border-radius: 30rpx;
}
.score-main {
	margin: 20rpx;
	padding: 20rpx;
	background-color: white;
	border-radius: 30rpx;
}
.score-title p{
	font-size: 45rpx;
	color: #212e69;
}
.sort-img {
	width: 20px;
	height: 20px;
	position: relative;
	top: 5px;
}
.course-score-table {
	width: 100%;
	table-layout:fixed;
}
.course-score-table th{
	text-align: left;
	padding-top: 10px;
	padding-bottom: 10px;
}
.course-score-table th:nth-child(1){
	width: 60%;
}
.course-score-table tr:nth-child(even) {
	background-color: #fafafa;
}
.course-score-table tr{
	line-height: 30px;
}
.sort-opt {
	position: relative;
	top: 10px;
	margin-left: 5px;
}
</style>
